<!DOCTYPE html>
<html>
<head>
  <link href="css/bootstrap.css" media="screen" rel="stylesheet" />
  <!--
  <link href="Xcss/style.css" media="screen" rel="stylesheet" />
    -->
  <script src='js/libs/jquery-1.10.2.js'></script>
  <script src='js/libs/handlebars-1.1.2.js'></script>
  <script src='js/libs/ember-1.4.0.js'></script>
  <script src='js/libs/ember-states.js'></script>
  <script src='js/libs/ember-data-1.0.0.js'></script>
  <script src='js/config.js'></script>
  <script src='js/util.js'></script>
  <script src='js/app.js'></script>
  <script src='js/adapter.js'></script>
  <script src='js/model.js'></script>
  <script src='js/adapter.js'></script>
  <script src='js/route.js'></script>
  <script src='js/extra.js'></script>
  <script src='js/controller.js'></script>
  <script>
      $(document).ready(function() {
      $("#spinx").hide();
      });
  </script>  
  <style>
      div {
          border: solid green 1px;
      }
  </style>
  <!--
  <style>
      a:link,a:visited
      {
          display:block;
          font-weight:bold;
          color:#000000;
          background-color:#B2E0F0;
          //width:120px;
          text-align:left;
          padding:4px;
          text-decoration:none;
          //float:left;
      }
      a:hover,a:active
      {
          background-color:#33CC33;
      }
      input:enabled {
          background-color:#ddffdd;
      }
      input:disabled {
          background-color:#ffffff;
      }
</style>
  -->
</head>
<body>
<div>
<form method="post" action="server/process.php">
	<input type="submit" value="Sign off">
    <input type="hidden" name="action" value="logoff">
</form>
</div>

<div id=spinx style='border:none;position:absolute;left:100px;top:150px;background-color:white'>
<h2><i><img width='200px' height='200px' src='images/spin.gif'/></i></h2>
</div>

<script type='text/x-handlebars' data-template-name='about'>
    <h2>About</h2>
    {{time}}
</script>

<script type='text/x-handlebars' data-template-name='application'>
    <table>
    <tr><td></td>
    <td colspan=33 style='width:600px'>
    <div>
    <p>
    Top header goes here &nbsp;
    {{#link-to  'login'      class='navitem'}} Login     {{/link-to}}
    {{#link-to  'register'   class='navitem'}} Register     {{/link-to}}
    </p>
    </div>
    </td>
    </tr>
    <tr>
    <td style='height:555px;'>            
    </td>
    <td valign='top'style='width:100px;'> 
    <div class='navbar'>navbar
    <table><tr><td>
    {{#link-to  'index'   class='navitem'}} Home     {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'about'   class='navitem'}} About    {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'fields'   class='navitem'}} Fields  {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'users'   class='navitem'}} Users    {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'teams'   class='navitem'}} Teams    {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'createfield'   class='navitem'}} New Field    {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'createuser'   class='navitem'}} New User    {{/link-to}}
    </td></tr><tr><td>
    {{#link-to  'createteam'   class='navitem'}} New Team    {{/link-to}}
    </td></tr></table>
    </div>
    </td>
    <td Xstyle='border:solid gray 1px'></td>
    <td valign='top'>
    <div class='container'>
    {{outlet}}
    </div>
    </td>
    </tr>
    </table>
    <hr/>
    <div>
    <footer class='container'>Copyright &copy; SSW. Powered by Ember.</footer>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='index'>
    <div class='container'>
    <h1>This is my App</h1>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='teams'>
    <div class='container'>
    <h2>Teams</h2>
	<table>
    <tr><td>
    <table>
    {{#each}}  
    <tr>
    <td>
    {{id}} 
    </td>
    <td>
    {{#link-to 'team' this }}{{name}} {{/link-to}}
    </td>
    </tr>
    {{/each}}
    </table>
    </td><td>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{#link-to  'createteam'   class='navitem'}} Create New Team    {{/link-to}}
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='field'>
    {{partial 'field/_edit'}}
    {{#if notEditing}}
        <div><button {{action 'edit'}}>Edit</button></div>
    {{else}}
        <div>
            <button {{action 'save'}}>Save</button>
            <button {{action 'undo'}}>Undo</button>
            <button {{action 'cancel'}}>Cancel</button>
        </div>
    {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='team'>
    {{partial 'team/_edit'}}
    {{#if notEditing}}
        <div><button {{action 'edit'}}>Edit</button></div>
    {{else}}
        <div>
            <button {{action 'save'}}>Save</button>
            <button {{action 'undo'}}>Undo</button>
            <button {{action 'cancel'}}>Cancel</button>
        </div>
    {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='team/_edit'>
    <div>  {{id}} <br/>
    Name   {{input type=text disabled=notEditing value=name}} <br/>
    Age    {{input type=text disabled=notEditing value=age}} <br/>
    Gender {{input type=text disabled=notEditing value=gender}} <br/>
    Class  {{input type=text disabled=notEditing value=pclass}} <br/>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='error'>
    <b>ERROR</b>
    <div class='alert alert-error'> &nbsp; {{error}}</div>
</script>

<script type='text/x-handlebars' data-template-name='login'>
    <div>
    <h3>Login</h3>
    <form {{action 'login' on "submit"}} >
        Email {{input type=text value=username}} &nbsp;
        Password {{input type=text value=password}} 
        {{input type="submit" value="Login"}}
    </form>
    </div>
    <div>
        {{#if error}} 
            <div class='alert alert-error'> &nbsp; {{error}}</div>
        {{else}}
            <div class='alert'> &nbsp; {{token}} </div>
        {{/if}}
    </div>
</script>

<script type='text/x-handlebars' data-template-name='register'>
    <div>
    <h3>Register</h3>
    <form {{action 'register' on "submit"}} >
        Email {{input type=text value=username}} &nbsp;
        Password {{input type=text value=password}} 
        Password {{input type=text value=password2}} 
        {{input type="submit" value="Register"}}
    </form>
    </div>
    <div>
        {{#if error}} 
            <div class='alert alert-error'> &nbsp; {{error}}</div>
        {{else}}
            <div class='alert'> &nbsp; {{token}} </div>
        {{/if}}
    </div>
</script>

<script type='text/x-handlebars' data-template-name='users'>
    <div class='container'>
    <h2>Users</h2>
    <table>
    <tr><td>
    <table>
    {{#each}}  
    <tr>
    <td>
    {{id}} 
    </td>
    <td>
    {{#link-to 'user' this }}{{username}} {{/link-to}}
    </td>
    </tr>
    {{/each}}
    </table>
    </td><td>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{#link-to  'createuser'   class='navitem'}} Create New User    {{/link-to}}
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='fields'>
    <div class='container'>
    <h2>Fields</h2>
    <table>
    <tr><td>
    <table>
    {{#each}}  
    <tr>
    <td>
    {{id}} 
    </td>
    <td>
    {{#link-to 'field' this }}{{name}} {{/link-to}}
    </td>
    </tr>
    {{/each}}
    </table>
    </td><td>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{#link-to  'createfield'   class='navitem'}} Create New Field    {{/link-to}}
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='createfield'>
    <div class='container'>
    <h2>Create New Field</h2>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{partial 'field/_edit'}}
    <button {{action 'create'}}>Create </button>
    <button {{action 'undo'}}>  Undo</button>
    <button {{action 'cancel'}}>Cancel</button>
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='createuser'>
    <div class='container'>
    <h2>Create New User</h2>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{partial 'user/_edit'}}
    <button {{action 'create'}}>Create </button>
    <button {{action 'undo'}}>  Undo</button>
    <button {{action 'cancel'}}>Cancel</button>
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='createteam'>
    <div class='container'>
    <h2>Create New Team</h2>
    <div>
    {{outlet}}
    </div>
    </td></tr></table>
    <div>
    {{partial 'team/_edit'}}
    <button {{action 'create'}}>Create new</button>
    <button {{action 'undo'}}>  Undo</button>
    <button {{action 'cancel'}}>Cancel</button>
    </div>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='field/_edit'>
    <div>{{id}} <br/>
    Name      {{input type=text disabled=notEditing value=name}} <br/>
    Age group {{input type=text disabled=notEditing value=age}} <br/>
    Class     {{input type=text disabled=notEditing value=pclass}} <br/>
    Location  {{input type=text disabled=notEditing value=location}} <br/>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='user'>
    {{partial 'user/_edit'}}
    {{userinfo}}
    {{partial 'userinfo/_edit'}}
    {{#if notEditing}}
        <div><button {{action 'edit'}}>Edit</button></div>
    {{else}}
        <div>
            <button {{action 'save'}}>Save</button>
            <button {{action 'undo'}}>Undo</button>
            <button {{action 'cancel'}}>Cancel</button>
        </div>
    {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='user/_edit'>
                                           <p><b>
                                                                   >-  {{user.username}} -<
                                                         >=  {{userinfo.last}} =<
                              Email      {{input type=text disabled=notEditing  value=username}} <br/>
                                </b></p>
    Password   {{input type=text disabled=notEditing  value=password}} <br/>
    {{userinfo.last}}<br/>
    xxxx {{userinfo}} nnnn
    </div>
</script>

<script type='text/x-handlebars' data-template-name='userinfo/_edit'>
    <div>
    Info <br/>
    Last Name  {{input type=text disabled=notEditing value=last}} <br/>
    First Name {{input type=text disabled=notEditing value=first}} <br/>
    Phone # 1  {{input type=text disabled=notEditing value=phone1}} <br/>
    Phone # 2  {{input type=text disabled=notEditing value=phone2}} <br/>
    Phone # 3  {{input type=text disabled=notEditing value=phone3}} <br/>
    </div>
</script>

<script type='text/x-handlebars' data-template-name='userinfo'>
    <div> 
    Email {{username}} <br/>
    Info 
    {{last}}, 
    {{first}} <br/>
    Phone #s 
    {{phone1}}  
    {{phone2}}  
    {{phone3}}  
    </div>
</script>

<script type='text/x-handlebars' data-template-name='request'>
    <div>
    {{slot}}
    </div>
</script>

<script type='text/x-handlebars' data-template-name='catchAll'>
    <b>Page NOT FOUND</b>
</script>
</body>
</html>
